<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 为了兼容6、7、8 -->
    <!-- [if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 导入bootstrap核心css库 -->
    <link rel="stylesheet" href="../class01-blog/bootstrap/css/bootstrap.min.css">
    <!-- 设计稿按1280px来进行设计 -->
    <!-- 父级容器在屏幕宽度>=1280px时，宽度设置为1280px -->
    <style>
        @media screen and (min-width:1280px){
            .container{
                width: 1280px;
            }  
        }
        .col-md-2{
            background-color: #f00;
        }
        .col-md-6{
            background-color: #0f0;
        }
        .col-md-4{
            background-color: #00f;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <!-- 先设置行，再考虑列 -->
        <div class="row">
            <!-- md:中等屏幕;  lg：大屏幕;  sm：小屏幕 -->
            <!-- 设置宽度考虑的是最小值多少 -->
            <div class="col-md-2">左边</div>
            <div class="col-md-6">中间</div>
            <div class="col-md-4">右边</div>
        </div>
        <div class="row">
            <!-- 偏移：向右推移十二等份中的几个等份 -->
            <div class="col-md-6 col-md-offset-2">1</div>
            <div class="col-md-4">2</div>
        </div>
        <div class="row">
            <!-- 排序： -->
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>
</html>